<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<view style="width: 100%;display: flex;">
			<view
				style="max-width: 300rpx;min-height: 70rpx; display: flex;flex-wrap: wrap;white-space: pre-wrap;padding: 10rpx;border-radius: 8rpx;background: #f3f2f5;align-items: center;">
				<view @click="playVoice" style="display: flex;align-items: center;" :style="{width:width}">
					<image v-if="voicePlaying" src="/static/images/yyy.gif" style="width: 30rpx;height: 30rpx;" mode=""></image>
					<image v-else src="/static/images/yyz.png" style="width: 30rpx;height: 30rpx;transform: rotate(180deg);" mode=""></image>
					<view style="color: #5e5e5e;margin-left: 8rpx;">
						{{info.timelong}}″
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '@/common/event';
	import moment from 'moment';
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				voicePlaying:false,
				actionss: [{
						text: '转发',
					},
					{
						text: '收藏',
					},
				],
				actions: [{
						text: '转发',
					},
					{
						text: '撤回',
					},
					{
						text: '收藏',
					},
				],
				width:'80px'
			}
		},
		destroyed() {
			innerAudioContext.stop()
			this.voicePlaying = false
		},
		mounted() {
			if (moment().valueOf() - this.info.time > 60000) {
				this.actions = [{
						text: '转发',
					},
					{
						text: '收藏',
					},
				]
			}
			
			const l = this.info.timelong * 10
			let w = 80 + l
			if(w > 280){
				w = 280
			}
			this.width = w + 'rpx'
			
			innerAudioContext.onStop((res)=>{
				this.voicePlaying = false
			})
			
			innerAudioContext.onEnded((res)=>{
				this.voicePlaying = false
			})
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				list: (state) => {

				}
			})
		},
		methods: {
			playVoice: function(){
				
				if(this.voicePlaying){
					this.voicePlaying = false
					innerAudioContext.stop()
					return
				}
				innerAudioContext.stop()
				innerAudioContext.src = this.$store.state.common.systemInfo.fileurl + this.info.content
				innerAudioContext.play()
				setTimeout(()=>{
					this.voicePlaying = true
				},300)
			},
			showbig:function(){
				const src = this.$store.state.common.systemInfo.fileurl + this.info.content
				uni.previewImage({
					urls:[src]
				})
			},
			handleLongpress: function(e) {
				console.log(e)
				if (moment().valueOf() - this.info.time > 60000) {
					this.actions = [{
							text: '转发',
						},
						{
							text: '收藏',
						},
					]
				}
			},
			gofriend:function(){
				const list = this.$store.state.friend.list
				const user = this.$store.state.user.user
				const ret = list.find(e=>{
					return e.fid == this.info.uid
				})
				if(ret){
					uni.navigateTo({
						url:"/pages/friend/detail?id="+this.info.uid
					})
				}else{
					uni.navigateTo({
						url:"/pages/friend/friend?id="+this.info.uid
					})
				}
			},
			csitemfunc: async function(ex) {
				const e = ex.text
				console.log(e)
				if(e == "转发"){
					uni.navigateTo({
						url:"/pages/friend/sharemessage?id="+this.info.id
					})
				}
				if(e == "撤回"){
					const ret = await this.$u.delete(`chat/chat/removemessage/${this.info.id}`)
					uni.showToast({
						title:"已撤回",
					})
				}
				if(e == "收藏"){
					const ret = await this.$u.post(`chat/chat/collect`,this.info)
					pub("collect_done",ret.data)
					uni.showToast({
						title:"已收藏"
					})
				}
			},
		}
	}
</script>

<style>
</style>